<template>
    <div style="background: #fff;height: 100%;">
        <van-nav-bar title="应用中心" />
        <div class="applyBox">
            <div class="left">
                <van-sidebar v-model="activeKey" @change="onChange" style="width: 100%;">
                    <van-sidebar-item v-for="item in menuList" :key="item.menuId" :title="item.menuName" />
                </van-sidebar>
            </div>
            <div class="right">
                <h5>{{applyTitle}}</h5>
                <van-grid :column-num="3" :border="false">
                    <van-grid-item v-for="item in applyList" :key="item.menuId" :icon="'images/menuIcon/' + item.menuPicture" :text="item.menuName" @click="handleClick(item)" />
                </van-grid>
            </div>
        </div>
        <full-loading v-if="loading"></full-loading>
    </div>
</template>

<script>
    import { queryStaffMenu, saveBusiAccesslog } from '@/api/platframe/mainFrame/home';
    export default {
        data () {
            return {
                loading: false,
                searchKeyword: '', // 搜索关键字
                activeKey: 0,
                menuList: [],
                applyTitle: '',
                applyList: []
            }
        },
        created () {
            let menuName = this.$route.query.menuName || '';
            this.queryStaffMenuData(menuName);
        },
        methods: {
            // 点击侧边菜单标签
            onChange (index) {
                this.applyTitle = this.menuList[index].menuName;
                this.applyList = this.menuList[index].children;
                sessionStorage.setItem('activeApply', index);
            },
            // 点击子应用
            handleClick (item) {
                if (item.menuName === '智慧出行') {
                    window.location.href = 'cheliang/index.html';
                    return
                }
                if (!item.menuUrl) return;
                this.$router.push({
                    path: item.menuUrl
                });
                let params = {
                    functionId: item.menuId,
                    functionName: item.menuName,
                    url: item.menuUrl,
                    fmodule: this.menuList[this.activeKey].menuName,
                    smodule: "",
                };
                saveBusiAccesslog(params);
            },
            // 查询用户菜单
            queryStaffMenuData (menuName) {
                if (sessionStorage.getItem('menuList')) {
                    this.menuList = JSON.parse(sessionStorage.getItem('menuList'));
                    if (sessionStorage.getItem('activeApply')) {
                        this.activeKey = Number(sessionStorage.getItem('activeApply'));
                        this.onChange(Number(sessionStorage.getItem('activeApply')));
                        return
                    }
                    let index = menuName ? this.menuList.findIndex(item => item.menuName === menuName) : -1;
                    if (index === -1) {
                        this.activeKey = 0;
                        this.onChange(0);
                    } else {
                        this.activeKey = index;
                        this.onChange(index);
                    }
                } else {
                    this.loading = true;
                    queryStaffMenu().then(res => {
                        this.loading = false;
                        if (res.code === 1000 && res.data && res.data.length) {
                            this.menuList = res.data;
                            sessionStorage.setItem('menuList', JSON.stringify(res.data));
                            if (sessionStorage.getItem('activeApply')) {
                                this.activeKey = Number(sessionStorage.getItem('activeApply'));
                                this.onChange(Number(sessionStorage.getItem('activeApply')));
                                return
                            }
                            let index = menuName ? this.menuList.findIndex(item => item.menuName === menuName) : -1;
                            if (index === -1) {
                                this.activeKey = 0;
                                this.onChange(0);
                            } else {
                                this.activeKey = index;
                                this.onChange(index);
                            }
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/.van-nav-bar__content {
        background: #4eb3e9;
        .van-nav-bar__title {
            color: #fff;
        }
    }
    .applyBox {
        display: flex;
        height: calc(100% - 47px);
        overflow: auto;
        .left {
            width: 88px;
            background: #f4f7fa;
            /deep/.van-sidebar-item--select::before {
                background-color: #757075;
                height: 100%;
            }
        }
        .right {
            flex: 1;
            h5 {
                color: #283f65;
                font-size: 16px;
                line-height: 22px;
                padding-left: 12px;
                margin-top: 16px;
            }
            /deep/.van-grid-item__text {
                text-align: center;
                min-height: 38px;
            }
        }
    }
</style>
